﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />

		<title>会员福利结果汇总</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<style>
			html,
			body {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
				background-color: #ffffff;
			}
			
			th,
			td {
				text-align: center;
				height: 28px;
			}
			
			.lineblock {
				background-color: #efefef;
				height: 0.8rem;
			}
			
			.tabContent {
				min-height: calc(100% - 28px);
			}
			
			.header {
				background-color: #3d9ff7;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				/*font-weight: bold;*/
				text-align: center;
				color: #FFFFFF;
			}
			
			.tabHeader {
				font-size: 0;
				height: 35px;
				line-height: 35px;
			}
			
			.tabHeader a {
				display: inline-block;
				background-color: #EEEEEE;
				font-size: 16px;
				width: 50%;
				text-decoration: none;
				cursor: pointer;
				text-align: center;
			}
			
			.tabHeader .tabActive {
				background-color: #FFFFFF;
			}
			
			.content {
				height: calc(100% - 40px);
			}
			
			.tabContent .noActive {
				display: none;
			}
			
			.tabContent .tabPage {
				background-color: #FFFFFF;
				height: 100%;
				/*margin: 0 8px;*/
			}
			
			.activeContainer {
				border: 0px #000000 solid;
				padding: 10px;
				padding-top: 20px;
			}
			
			.activeContainer table {
				width: 100%;
			}
			
			.topinfo {
				border: 1px #000000 solid;
				border-bottom: 0px #000000 solid;
				height: 20px;
				position: relative;
			}
			
			.topinfo span {
				position: relative;
				top: -12px;
				background-color: #ffffff;
				left: 5px;
				padding: 5px;
			}
			
			.otherInfo {
				border: 1px #000000 solid;
				border-top: 0px #000000 solid;
				position: relative;
			}
			
			.otherInfo div {
				display: inline-block;
				width: 48%;
				padding-left: 10px;
			}
			
			.ipad .nodata {
				text-align: center;
				padding-bottom: 10px;
			}
			
			.ipad .data {
				display: none;
			}
			
			.textRed {
				color: red;
			}
		</style>
	</head>

	<body>
		<div class="header">
			<span>会员福利结果汇总</span>
		</div>
		<div class="content">
			<div class="tabHeader">
				<a class="tabActive">劳动节抽奖</a>
				<a>夏季会员活动</a>
			</div>
			<div class="tabContent">

				<div class="tabPage tab1">
					<!--<div class="lineblock"></div>-->
					<div class="activeContainer">
						<div class="topinfo">
							<span>中奖信息汇总</span>
						</div>
						<table border="" cellspacing="0" cellpadding="0">
							<thead>
								<tr>
									<th>奖品</th>
									<th>数量</th>
								</tr>
							</thead>
							<tbody class="tb1">
								<tr>
									<td colspan="4">暂无</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="lineblock"></div>
					<div class="activeContainer ipad">
						<div class="topinfo">
							<span>IPad中奖者信息</span>
						</div>
						<div class="otherInfo data">
							<div class="name">会员名:</div>
							<div class="phone">手机:</div>
							<div class="id">会员ID:</div>
							<div class="time">时间:</div>
						</div>
						<div class="otherInfo nodata">
							暂无
						</div>
					</div>
					<div class="lineblock"></div>
					<div class="activeContainer">
						<div class="topinfo">
							<span>中奖者前50名</span>
						</div>
						<table border="" cellspacing="0" cellpadding="0">
							<thead>
								<tr>
									<th>姓名</th>
									<th>奖品</th>
									<th>数量</th>
									<th>抽奖积分</th>
								</tr>
							</thead>
							<tbody class="tb4">
								<tr>
									<td colspan="4">暂无</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<div class="tabPage tab2 noActive">
					<!--<div class="lineblock"></div>-->
					<div class="activeContainer">
						<div class="topinfo">
							<span>中奖信息汇总</span>
						</div>
						<table border="" cellspacing="0" cellpadding="0">
							<thead>
								<tr>
									<th>奖品</th>
									<th>数量</th>
								</tr>
							</thead>
							<tbody class="tb1">
								<tr>
									<td colspan="4">暂无</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="lineblock"></div>
					<div class="activeContainer ipad">
						<div class="topinfo">
							<span>IPhoneX中奖者信息</span>
						</div>
						<div class="otherInfo data">
							<div class="name">会员名:</div>
							<div class="phone">手机:</div>
							<div class="id">会员ID:</div>
							<div class="time">时间:</div>
						</div>
						<div class="otherInfo nodata">
							暂无
						</div>
					</div>
					<div class="lineblock"></div>
					<div class="activeContainer">
						<div class="topinfo">
							<span>果汁机中奖者</span>
						</div>
						<table border="" cellspacing="0" cellpadding="0">
							<thead>
								<tr>
									<th>姓名</th>
									<th>手机号码</th>
									<th>数量</th>
									<th>中奖时间</th>
								</tr>
							</thead>
							<tbody class="tb3">
								<tr>
									<td colspan="4">暂无</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="lineblock"></div>
					<div class="activeContainer">
						<div class="topinfo">
							<span>中奖者前50名</span>
						</div>
						<table border="" cellspacing="0" cellpadding="0">
							<thead>
								<tr>
									<th>姓名</th>
									<th>奖品</th>
									<th>数量</th>
									<th>抽奖积分</th>
								</tr>
							</thead>
							<tbody class="tb4">
								<tr>
									<td colspan="4">暂无</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

			</div>
		</div>
	</body>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(function() {

			var url = "WXActivity/ActivityHandler.ashx";
			var GetList = function(type, callback) {
				$.post(url, { "action": "SummaryList", "type": type },
					function(data) {
						if(data.Success == false) {
							console.log(data.Data);
						} else {
							callback(data)
						}
					})
			};

			$('.tabHeader a').click(function() {
				$('.tabHeader a').removeClass('tabActive');
				$(this).addClass('tabActive');

				var i = $(this).index();
				$('.tabPage').hide();
				$('.tabPage').eq(i).show();
			});
			//奖品列表 
			var bandPrizeList = function(tab, data) {
				var html = "";
				if(data.length == 0) {
					html = '<tr><td colspan="4">暂无</td></tr>';
				} else {
					data.map(function(item, i) {
						var classStr = "";
						if(item.PrizeName == "抽奖总积分") {
							classStr = ' class="textRed" ';
						}
						html += "<tr><td>" + item.PrizeName + '</td><td' + classStr + '>' + item.PrizeCount + "</td></tr>"
					});
				};
				$(tab).find('.tb1').html(html);
			};
			//Ipad中奖者
			var BandIpadWinnerInfo = function(tab, data) {
				if(data.CustomerName == null) {
					$(tab).find('.ipad .data').hide();
					$(tab).find('.ipad .nodata').show();
				} else {
					$(tab).find('.ipad .data').show();
					$(tab).find('.ipad .nodata').hide();
					$(tab).find('.ipad .name').text("会员名:" + data.CustomerName);
					$(tab).find('.ipad .phone').text("手机:" + data.Mobile);
					$(tab).find('.ipad .id').text("会员ID:" + data.CardCode);
					$(tab).find('.ipad .time').text("时间:" + data.LotteryTime);
				}
			};
			//果汁机中奖者列表
			var bandJuicerWinnerInfo = function(tab, data) {
				var html = "";
				if(data.length == 0) {
					html = '<tr><td colspan="4">暂无</td></tr>';
				} else {
					data.map(function(item, i) {
						html += "<tr><td>" + item.CustomerName + "</td><td>" + item.Mobile + "</td><td>" + item.Count + "</td><td>" + item.LotteryTime + "</td></tr>";
					});
				}
				$(tab).find('.tb3').html(html);
			};
			//前50列表
			var bandTop50List = function(tab, data) {
				var html = "";
				if(data.length == 0) {
					html = '<tr><td colspan="4">暂无</td></tr>';
				} else {
					data.map(function(item, i) {
						html += "<tr><td>" + item.CustomerName + "</td><td>" + item.PrizeName + "</td><td>" + item.PrizeCount + "</td><td>" + item.Integral + "</td></tr>";
					});
				}
				$(tab).find('.tb4').html(html);
			}

			GetList(2, function(data) {
				var tab = $('.tab2');
				//奖品列表
				bandPrizeList(tab, data.Data.PrizeTotalList);
				//Ipad中奖者
				BandIpadWinnerInfo(tab, data.Data.ApplePrize);
				//果汁机中奖者列表
				bandJuicerWinnerInfo(tab, data.Data.BlenderList);
				//前50列表
				bandTop50List(tab, data.Data.LotteryList);
			});

			GetList(1, function(data) {
				var tab = $('.tab1');
				//奖品列表
				bandPrizeList(tab, data.Data.PrizeTotalList);
				//Ipad中奖者
				BandIpadWinnerInfo(tab, data.Data.ApplePrize);
				//前50列表
				bandTop50List(tab, data.Data.LotteryList);
			});

		});
	</script>

</html>